<!-- 这是adminpage（管理后端）页面的发布通知组件，登录后的用户可以在此处发帖，普通用户和admin用户均可 -->
<template>
  <div><p>在这里可以发布通知内容</p></div>

  <el-row justify="center">
    <el-col :span="18">
      <el-card shadow="always">
        <h2 style="text-align: center; margin-bottom: 40px">通知简讯</h2>

        <el-form :model="form" label-width="left">
          <!-- 第一行 -->
          <el-row justify="center" class="form-row">
            <el-col :span="18">
              <el-form-item label="发布标题">
                <el-input placeholder="请输入标题" v-model="form.title" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第一行 -->
          <el-row justify="center" class="form-row">
            <el-col :span="18">
              <el-form-item label="联系方式">
                <el-input
                  placeholder="请输入联系方式如15191304929"
                  v-model="form.contact"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第一行 -->
          <el-row justify="center" class="form-row">
            <el-col :span="18">
              <el-form-item label="简要描述">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请在出输入简要描述"
                  v-model="form.summary"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第一行 -->
          <el-row justify="center" class="form-row">
            <el-col :span="18">
              <el-form-item label="详细内容">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 10 }"
                  laceholder="请在此处输入详细内容"
                  v-model="form.content"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 🖼️ 图片上传部分 -->
          <el-row justify="center" class="form-row">
            <el-col :span="18">
              <el-form-item label="上传图片">
                <el-upload
                  ref="uploadRef"
                  class="upload-demo"
                  :action="`${$baseURL}notice/upload`"
                  list-type="picture-card"
                  :on-success="handleUploadSuccess"
                  :limit="10"
                  :auto-upload="true"
                  accept="image/*"
                  name="file"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row style="margin: 20px" justify="center">
          <el-button type="success" @click="submitForm">提交</el-button>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive } from "vue";
import api from "@/utils/api";
import { Plus } from "@element-plus/icons-vue";

// do not use same name with ref
const form = reactive({
  title: "",
  contact: "",
  summary: "",
  content: "",
  images: [], // 图片路径列表
});
// 上传成功
const handleUploadSuccess = (res) => {
  if (res.code === 200) {
    form.images.push(res.url); // 保存图片URL
    console.log(form.images);
  }
};
const uploadRef = ref(null);
const submitForm = async () => {
  try {
    const res = await api.post(
      "/notices",
      {
        title: form.title,
        contact: form.contact,
        summary: form.summary,
        content: form.content,
        images: form.images, // 把图片路径一并发给后端
      },
      { headers: { auth: true } }
    );

    console.log("发布成功:", res.data);

    // ✅ 清空表单
    form.title = "";
    form.contact = "";
    form.summary = "";
    form.content = "";
    form.images = [];
    uploadRef.value.clearFiles(); // ✅ 一行清空上传区

    // ✅ 可选：刷新通知列表
    // fetchNotices();

    alert("通知发布成功！");
  } catch (err) {
    console.error("发布失败:", err.response?.data || err.message);
    alert("发布失败，请重试！");
  }
};
</script>

<style scoped>
.form-row {
  margin-bottom: 10px;
}

.upload-demo {
  width: 100%;
}
</style>
